<p-dialog
  [(visible)]="visible"
  [modal]="true"
  [closable]="true"
  [draggable]="false"
  [resizable]="false"
  styleClass="instance-modal"
  [header]="modalTitle"
  (onHide)="onCancel()"
>
  <form [formGroup]="baseForm" class="p-fluid instance-form">
    <!-- Enabled Toggle -->
    <div class="field flex flex-row">
      <label class="field-label">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('enabled')"
        ></i>
        Enabled
      </label>
      <div class="field-input">
        <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
        <small class="form-helper-text">Enable this notification provider</small>
      </div>
    </div>

    <!-- Provider Name -->
    <div class="field">
      <label for="provider-name">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('name')"
        ></i>
        Provider Name *
      </label>
      <input
        id="provider-name"
        type="text"
        pInputText
        formControlName="name"
        placeholder="My Notification Provider"
        class="w-full"
      />
      <small class="form-helper-text">A unique name to identify this provider</small>
      <small *ngIf="hasError('name', 'required')" class="form-error-text"> Provider name is required </small>
    </div>

    <!-- Provider-Specific Configuration (Content Projection) -->
    <ng-content select="[slot=provider-config]"></ng-content>

    <!-- Event Triggers Section -->
    <div class="field">
      <label>
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('eventTriggers')"
        ></i>
        Notification Events
      </label>
      <div class="grid">
        <div class="col-6">
          <div class="field-checkbox">
            <p-checkbox
              formControlName="onFailedImportStrike"
              [binary]="true"
              inputId="on-failed-import-strike"
            ></p-checkbox>
            <label for="on-failed-import-strike" class="ml-2">On Failed Import Strike</label>
          </div>
        </div>
        <div class="col-6">
          <div class="field-checkbox">
            <p-checkbox formControlName="onStalledStrike" [binary]="true" inputId="on-stalled-strike"></p-checkbox>
            <label for="on-stalled-strike" class="ml-2">On Stalled Strike</label>
          </div>
        </div>
        <div class="col-6">
          <div class="field-checkbox">
            <p-checkbox formControlName="onSlowStrike" [binary]="true" inputId="on-slow-strike"></p-checkbox>
            <label for="on-slow-strike" class="ml-2">On Slow Strike</label>
          </div>
        </div>
        <div class="col-6">
          <div class="field-checkbox">
            <p-checkbox
              formControlName="onQueueItemDeleted"
              [binary]="true"
              inputId="on-queue-item-deleted"
            ></p-checkbox>
            <label for="on-queue-item-deleted" class="ml-2">On Queue Item Deleted</label>
          </div>
        </div>
        <div class="col-6">
          <div class="field-checkbox">
            <p-checkbox formControlName="onDownloadCleaned" [binary]="true" inputId="on-download-cleaned"></p-checkbox>
            <label for="on-download-cleaned" class="ml-2">On Download Cleaned</label>
          </div>
        </div>
        <div class="col-6">
          <div class="field-checkbox">
            <p-checkbox formControlName="onCategoryChanged" [binary]="true" inputId="on-category-changed"></p-checkbox>
            <label for="on-category-changed" class="ml-2">On Category Changed</label>
          </div>
        </div>
      </div>
    </div>
  </form>

  <!-- Modal Footer -->
  <ng-template pTemplate="footer">
    <div>
      <button pButton type="button" label="Cancel" class="p-button-text" (click)="onCancel()"></button>
      <button
        pButton
        type="button"
        label="Test"
        icon="pi pi-play"
        class="p-button-outlined ml-2"
        [disabled]="baseForm.invalid || testing"
        [loading]="testing"
        (click)="onTest()"
      ></button>
      <button
        pButton
        type="button"
        label="Save"
        icon="pi pi-save"
        class="p-button-primary ml-2"
        [disabled]="baseForm.invalid || saving"
        [loading]="saving"
        (click)="onSave()"
      ></button>
    </div>
  </ng-template>
</p-dialog>
